<script setup lang="ts">

defineProps({
  title: {
    type: String,
    default: 'vue-web-terminal'
  },
  pinned: Boolean,
  draggable: Boolean,
  fullscreenState: Boolean
})
const emits = defineEmits(['on-click'])

const _triggerClick = (type) => {
  emits('on-click', type)
}
</script>

<template>
  <div class="t-header">
    <span class="t-header-title t-disable-select" @click="_triggerClick('title')">
      {{ title }}
    </span>
    <ul class="t-shell-dots">
      <li class="shell-dot-item t-shell-dots-red"
          @click="_triggerClick('close')">
        <svg t="1719914784910"
             class="t-shell-dot"
             viewBox="0 0 1024 1024"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="7341"
             width="10"
             height="10">
          <path
              d="M803.84 863.744c-8.704 0-16.896-3.584-23.552-10.24L512 585.728l-267.264 267.264c-6.656 6.656-14.336 10.24-23.04 10.24-12.288 0-25.088-7.168-39.424-21.504-14.848-14.848-21.504-27.648-21.504-39.936 0-8.704 3.584-16.384 10.752-23.04L438.272 512 170.496 244.224c-25.6-26.112 0-52.736 9.728-62.464 11.776-11.776 25.088-23.04 39.424-23.04 8.192 0 16.384 3.584 24.576 11.264L512 438.272l267.776-267.264c7.168-7.168 15.36-10.752 23.552-10.752 12.288 0 24.064 7.168 40.96 23.552 11.264 11.264 35.328 35.328 9.216 60.928L585.728 512l267.264 267.264c23.04 23.04 9.216 44.032-9.216 62.976-13.824 14.336-27.648 21.504-39.936 21.504z"
              p-id="7342"
              fill="#1413139c"/>
        </svg>
      </li>
      <li class="shell-dot-item t-shell-dots-yellow">

      </li>
      <li class="shell-dot-item t-shell-dots-green"
          @click="_triggerClick('fullscreen')">
        <svg t="1719914741670"
             class="t-shell-dot"
             viewBox="0 0 1027 1024"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="7131"
             width="10"
             height="10">
          <path
              d="M403.456 549.888l-173.568 173.568v-123.392c0-8.192-6.656-14.848-14.848-14.848H143.872c-8.192 0-14.848 6.656-14.848 14.848v237.056c0 31.744 26.112 57.344 57.344 57.344h237.568c8.192 0 14.848-6.656 14.848-14.848V808.96c0-8.192-6.656-14.848-14.848-14.848H302.08l173.056-173.056c5.632-5.632 5.632-14.848 0-20.48l-50.688-50.688c-6.144-5.632-15.36-5.632-20.992 0zM894.464 254.464V186.88c0.512-31.744-25.6-57.344-56.832-57.344h-237.568c-7.68 0-14.336 6.144-14.336 14.336v72.192c0 7.68 6.144 14.336 14.336 14.336h123.904l-169.984 168.96c-5.632 5.632-5.632 14.336 0 19.968L605.696 471.04c5.632 5.632 14.336 5.632 19.968 0L793.6 302.592v120.832c0 7.68 6.144 14.336 14.336 14.336h72.192c7.68 0 14.336-6.144 14.336-14.336v-168.96z"
              p-id="7132"
              fill="#1413139c"/>
        </svg>
      </li>
    </ul>

    <div class="t-header-pin" @click="_triggerClick('pin')" v-if="draggable">
      <svg v-if="pinned"
           t="1683254395548"
           class="icon"
           viewBox="0 0 1025 1024"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="4113"
           width="18"
           height="18">
        <path d="M320 839.68l-238.592 174.08c-8.704 6.656-19.456 9.728-29.696 9.728-12.8 0-26.112-5.12-35.84-14.848-17.92-17.92-20.48-46.08-5.12-66.56l212.992-288.256L56.32 487.424C39.936 471.04 36.864 445.44 48.128 425.472c8.192-12.8 76.8-112.64 229.376-75.264 2.56 0.512 5.12 0.512 8.192 1.024 6.144 0.512 13.312 1.024 20.992 2.56 32.256 5.12 89.6-20.48 139.264-62.976 47.616-40.448 78.336-87.552 78.336-120.32 0-7.68 0-15.872-0.512-23.552-1.024-30.72-3.072-77.824 31.744-112.64 41.472-41.472 107.52-45.056 153.088-7.68 1.024 0.512 1.536 1.536 2.56 2.56 24.576 24.064 276.48 275.968 279.04 278.528 21.504 21.504 33.792 50.688 33.792 81.408s-11.776 59.392-33.792 80.896c-34.816 34.816-82.432 33.28-113.664 31.744-7.168 0-15.36-0.512-23.04-0.512-30.72 0-67.584 21.504-103.936 60.928-50.688 55.296-81.92 126.464-79.36 158.72 1.024 10.24 3.072 28.16 3.584 30.72 36.864 149.504-62.976 217.6-74.752 225.28-20.48 12.288-46.592 9.216-62.976-7.168l-165.376-165.376-50.688 35.328z"
              fill="#65ff2e"
              class="t-shell-pin-icon"
              p-id="4114"/>
      </svg>
      <svg v-else
           t="1683166931100"
           class="icon"
           viewBox="0 0 1025 1024"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="2638"
           width="18"
           height="18">
        <path
            d="M51.196068 1024c-13.021992 0-26.0184-5.091113-36.021541-15.094254-18.113104-18.164271-20.262117-46.050265-5.091113-66.337966l213.059228-288.325828-166.983379-166.983379C39.862586 470.961896 36.639068 445.48075 48.305135 425.2698c7.982046-12.612656 76.699275-112.82315 229.483822-75.010766 2.532765 0.307002 5.270197 0.537253 8.212297 0.793088 6.267953 0.537253 13.277827 1.17684 20.87612 2.404847 32.33752 5.244614 89.516599-20.722619 139.148552-63.037697 47.559691-40.49865 78.285451-87.751339 78.285451-120.344693 0-7.57271-0.179084-15.631507-0.358169-23.536802-1.279174-30.623426-3.223519-77.697031 31.979351-112.874317 41.649907-41.701074 107.552953-45.05251 153.270633-7.854129 0.921005 0.741921 1.76526 1.535009 2.583932 2.379264l-0.025583 0c24.585725 24.048472 276.608594 275.815506 279.243692 278.476188 21.694792 21.694792 33.642277 50.527374 33.693444 81.176384 0.025583 30.674593-11.896319 59.456009-33.539943 81.099634-35.023785 35.049369-82.353225 33.053857-113.565071 31.723516-7.393626-0.153501-15.478006-0.332585-23.025133-0.332585-30.828094 0-67.69389 21.592458-103.715431 60.760767-50.808793 55.260318-82.09739 126.63823-79.411124 158.617581 1.125673 10.258976 3.223519 28.37208 3.607271 30.930428 36.891379 149.612195-63.114447 217.843339-74.627013 225.109047-20.697036 12.484739-46.357267 9.389137-63.012113-7.240125l-178.393611-178.393611c-10.003141-10.003141-10.003141-26.171901 0-36.175042s26.171901-10.003141 36.175042 0l178.393611 178.393611c7.854129-5.091113 80.101878-54.646315 51.320462-171.76749-0.51167-2.35368-3.044434-23.562386-4.374775-35.970374-4.298025-51.115795 35.586622-136.027367 92.688951-198.118475 32.439854-35.254036 83.27423-77.287695 141.348731-77.287695 7.905296 0 16.399011 0.179084 24.662475 0.358169 32.41427 1.355924 58.048918 0.972172 75.77827-16.782763 11.973069-11.973069 18.548024-27.885994 18.548024-44.847842-0.025583-17.013015-6.677288-33.00269-18.701524-45.05251C952.220677 340.23031 683.849964 72.243349 675.944668 64.645055c-24.278723-19.724864-60.7096-17.882853-83.785899 5.21903-17.908437 17.908437-18.317772 43.491917-17.013015 75.087516 0.204668 8.800717 0.383752 17.243266 0.383752 25.148562 0 48.378362-35.995957 107.936705-96.270638 159.282751-49.478452 42.135993-122.979792 83.811483-180.491457 74.60143-6.293536-1.023339-12.049819-1.509425-17.192099-1.944345-3.325852-0.281418-6.421454-0.562837-9.312387-0.921005-2.456014-0.07675-4.860861-0.537253-7.188958-1.304758-117.760762-29.037251-167.597382 43.44075-172.893163 51.806549l182.742803 182.026466c8.954218 8.954218 10.028724 23.101883 2.481598 33.309692L51.170485 973.114457l238.617125-174.530506c11.435816-8.365798 27.425491-5.80745 35.740123 5.602782s5.80745 27.399908-5.602782 35.714539l-238.821793 174.12117C72.148939 1020.699731 61.685295 1024 51.196068 1024z"
            fill="#e6e6e6"
            class="t-shell-pin-icon"
            p-id="2639"/>
      </svg>
    </div>
  </div>
</template>

<style scoped>
.t-header-pin {
  display: inline-block;
  position: absolute;
  z-index: 100;
  right: 13px;
  top: 7px;
  cursor: pointer;
}
</style>
